<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-Element</title>
    {#    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">#}
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.min.css" rel="stylesheet">
    <style>
        #page {
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }

        #page a {
            text-decoration: none;
            color: #67C23A;
            cursor: pointer;
            margin: 20px 20px;
        }

        h1 {
            color: #909399;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>员工信息表</h1>
    <hr>
    <el-table v-loading="loading" :data="emps" height="450" stripe style="width: 100%"
              :default-sort="{prop: 'salary', order: 'descending'}" >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="80" fixed></el-table-column>
        <el-table-column prop="name" label="姓名" width="100" sortable> </el-table-column>
        <el-table-column prop="gender" label="性别" width="80"></el-table-column>
        <el-table-column prop="job" label="岗位" width="120"></el-table-column>
        <el-table-column prop="idcard" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="salary" label="工资" width="80" sortable></el-table-column>
        <el-table-column prop="address" label="地址" width="250"></el-table-column>
        <el-table-column prop="department_id.name" label="科组" width="80"></el-table-column>
    </el-table>
</div>
<div id="page">
    <a id="prev" @click="prevPage()">上一页</a>
    <a id="next" @click="nextPage()">下一页</a>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.min.js"></script>
{#<script src="https://unpkg.com/element-ui/lib/index.js"></script>#}
<script>
    new Vue({
        el: '#app',
        data: {
            emps: [],
            loading: true,
        },
        delimiters: ["[[", "]]"],
        created() {
            this.getEmpData()
        },
        methods: {
            getEmpData() {
                this.loading = true
                fetch('/app/emps/').then(resp => resp.json())
                    .then(json => {
                        setTimeout(() => {
                            this.emps = json
                            this.loading = false
                        }, 1000)
                    }, err => {
                        console.log('Error')
                    });
            },
            prevPage() {
            },
            nextPage() {
            },
        },
    });
</script>
</html>